<template>
<el-container>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="">
      </div>
      <!-- 登录表单 -->
      <el-form label-width="0px" class="login_form">
        <!-- 用户名 -->
        <el-form-item>
          <el-input placeholder="请输入邮箱" prefix-icon="el-icon-message" v-model.lazy="form.mail"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
          <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" show-password v-model.trim="form.pwd"></el-input>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item class="btn_login">
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
        <el-form-item class="btns">
            <el-button type="text"  @click="toRegister" class="btn_register">现在注册</el-button>
            <el-button type="text" @click="toForgotPassword" class="btn_forgetpwd">忘记密码？</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
      <el-footer>
      <div>大连理工大学 软件学院</div>
    </el-footer>
    </el-container>
</template>

<script>
export default {
  data () {
    return {
      form: {
        mail: '',
        pwd: ''
      },
      check: false
    }
  },
  methods: {
    trim (str) {
      return str.replace(/(^\s*)|(\s*$)/g, '')
    },
    // 点击 登录按钮
    login () {
      // 登陆前的表单与验证
      // 根据验证结果 决定是否发起登录请求
      // Message弹出框提示登录是否成功
      this.trim(this.form.mail)
      if (this.form.mail !== '' && this.form.pwd !== '') {
        this.$axios({
          methods: 'POST',
          url: '/admin/adminCheck',
          params: {
            mail: this.form.mail,
            pwd: this.form.pwd
          }
        })
          .then((response) => {
            console.log(response)
            this.check = response.data.data[0]
            if (this.check === true) {
              const id = response.data.data[1]
              // fix
              if (id === 'admin') {
                this.$router.push('/admin/' + id)
              } else {
                this.$router.push('/home/' + id)
              }
            } else {
              console.log('login wrong')
              alert('账号或密码错误')
            }
            console.log(this.check)
          })
          .catch(function (error) { console.log(error) })
      }
    },

    // 点击 现在注册按钮， 跳转到注册页面
    toRegister () {
      this.$router.push('/register')
    },
    toForgotPassword () {
      this.$router.push('/ForgotPassword')
    }
  }
}
</script>

<style lang="less" scoped>
.login_container{
    // background-color: #2b4b6b;
    background-color: #eee;
    border-radius: 10px;
    margin: 0 25px 0 25px;
    height: 100%;
}

.login_box{
    width: 450px;
    height: 350px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-40%);
    box-shadow: 0 0 10px #ccc;

    .avatar_box{
        width: 130px;
        height: 130px;
        border: 1px solid #eee;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 0 0 10px #ddd;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }
}

.login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.btn_login {
    display: flex;
    justify-content: center;
}

.btns {
    display: flex;
    justify-content:center;
    .btn_forgetpwd {
        color: #999;
    }
}
.el-footer{
  color: #666;
  font-size: 12px;
  > div {
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 5%;
    transform: translate(-50%,50%);
  }
}
</style>
